<template>
  <div class="content">
    <el-table highlight-current-row :data="dataList" @row-click="handleClick">
      <el-table-column prop="songName" label="歌曲" />
      <el-table-column prop="singerName" label="歌手" />
      <el-table-column prop="introduction" label="专辑" />
      <el-table-column label="编辑" width="80" align="center">
        <template #default="scope">
          <el-dropdown>
            <el-icon @click="handleEdit(scope.row)"><MoreFilled /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  :icon="Download"
                  @click="downloadMusicTwo(scope.row.id)">下载</el-dropdown-item>
                <el-dropdown-item :icon="Delete" v-if="show" @click="deleteCollection({ id: scope.row.id })">删除</el-dropdown-item>
                <el-dropdown-item :icon="Wallet" @click="paySong({ songId: scope.row.id, userId: userId })">支付</el-dropdown-item>
                <el-dropdown-item :icon="ShoppingCart" v-if="token" @click="addCart({ songId: scope.row.id, userId: userId, price: scope.row.price })">添加到购物车</el-dropdown-item>  
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, toRefs, computed, reactive } from "vue";
import { useStore } from "vuex";
import { MoreFilled, Delete, Download, Wallet, ShoppingCart } from "@element-plus/icons-vue";

import mixin from "@/mixins/mixin";
import { HttpManager } from "@/api";
import { Icon } from "@/enums";

// 定义 props
const props = defineProps({
  songList: Array<{ path: string; name: string; }>,
  show: {
    default: false
  }
});

// 定义 emits
const emit = defineEmits(["changeData"]);

const { getSongTitle, getSingerName, playMusic, checkStatus, downloadMusic } = mixin();
const { proxy } = getCurrentInstance();
const store = useStore();

const { songList } = toRefs(props);

const iconList = reactive({
  dislike: Icon.Dislike,
  like: Icon.Like,
});

const songUrl = computed(() => store.getters.songUrl);
const singerName = computed(() => store.getters.singerName);
const songTitle = computed(() => store.getters.songTitle);
const token = computed(() => store.getters.token);

const dataList = computed(() => {
  const list = [];
  songList.value.forEach((item: any, index) => {
    item["songName"] = getSongTitle(item.name);
    item["singerName"] = getSingerName(item.name);
    item["index"] = index;
    list.push(item);
  });
  return list;
});

async function downloadMusicTwo(id) {
  try {
    const result = (await HttpManager.downloadMusicTwo(id)) as ResponseBody;

    if (result.success) {
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });
    }
  } catch (err) {
    (proxy as any).$message({
      message: err,
      type: 'error',
    });
  }
}

function handleClick(row) {
  playMusic({
    id: row.id,
    url: row.url,
    pic: row.pic,
    index: row.index,
    name: row.name,
    lyric: row.lyric,
    currentSongList: songList.value,
  });
}

function handleEdit(row) {
  console.log("row", row);
}

const userId = computed(() => store.getters.userId);

async function deleteCollection({ id }) {
  if (!checkStatus()) return;

  const result = null;//(await HttpManager.deleteCollection(userId.value, id)) as ResponseBody;
  (proxy as any).$message({
    message: result.message,
    type: result.type,
  });

  if (result.data === false) proxy?.$emit("changeData", result.data);
}

// 歌曲支付
async function paySong({ songId, userId }) {
  if (!checkStatus()) return;
  const result1 = (await HttpManager.getPaystatus(songId, userId)) as ResponseBody;
  if (result1.data) {
    (proxy as any).$message({
      message: "歌曲已经支付",
      type: result1.type,
    });
    return;
  }
  // 打开支付宝付款页面
  let songIds = [];
  songIds.push(songId)
  const result2 = (await HttpManager.toPay(songIds, userId, 1)) as ResponseBody;
  if (result2.success) {
    const divForm = document.getElementsByTagName('div');
    if (divForm.length) {
      document.body.removeChild(divForm[0]);
    }
    const div = document.createElement('div');
    div.innerHTML = result2.data;
    document.body.appendChild(div);

    document.forms[0].setAttribute('target', '_self');//_blank新开窗口跳转  
    document.forms[0].submit();
  } else {
    (proxy as any).$message({
      message: result2.message,
      type: result2.type,
    });
  }
}

async function addCart({ songId, userId, price }) {
  const result = (await HttpManager.addCart(songId, userId, price)) as ResponseBody;
  (proxy as any).$message({
    message: result.message,
    type: result.type,
  });
}
</script>

<style lang="scss" scoped>
// 使用Sass 3.0新模块系统导入
@use "@/assets/css/var" as *;
@use "@/assets/css/global";

.content {
  background-color: $color-white;
  border-radius: $border-radius-songlist;
  padding: 10px;
}

.content:deep(.el-table__row.current-row) {
  color: $color-black;
  font-weight: bold;
}

.content:deep(.el-table__row) {
  cursor: pointer;
}

.icon {
  @include global.icon(1.2em, $color-black);
}
</style>
